<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 颜色名称 css2有17个，css3有140个，甚至我们也可以自己定义-->
    <div class="test-named-color">测试有名颜色</div>
    <!-- rgb,rgba颜色表示 -->
    <div class="test-rgb">测试rgb颜色</div>
    <!--请设计div和class，探究长短16进制颜色表示 -->
    <div class="sixteen">探究长短16进制颜色表示</div>
    <!--请设计div和class，探究hsl,hsla颜色表示 -->
    <div class="hsl">探究hsl颜色表示</div>
    <div class="hsla">探究hsla颜色表示</div>
    <!--请设计div和class，探究不透明度opacity 并和rgba\hsla做效果比较-->
    <div class="opacity">探究不透明度opacity</div>
    <div class="rgba">rgba</div>
    <div class="hsla">hsla</div>
    <style>
        div {
            /* 给所有div中的文字一个统一的前景色 */
            color: rgb(14, 11, 96);
            width: 200px;
            height: 100px;
            /* 画一个宽一些的边框，留意边框下的背景色 */
            border: 15px red dashed;
            /* div间隔 */
            margin-bottom: 5px;
        }

        .test-named-color {
            background-color: aquamarine;
        }

        .test-rgb {
            background-color: rgb(102, 204, 255);
        }

        .sixteen {
            background-color: #39C5BB;
        }

        .hsl {
            background-color: hsl(120deg, 70%, 50%);
        }

        .hsla {
            background-color: hsla(9, 100%, 64%, 1);
        }

        .opacity {
            background-image: linear-gradient(orange, pink);
            opacity: 0.5;
        }

        .rgba {
            background-color: rgba(102, 204, 255, 50%);
        }
    </style>
    <hr>这是关键源码
    <pre>    &lt!-- 颜色名称 css2有17个，css3有140个，甚至我们也可以自己定义-->
        &ltdiv class="test-named-color">测试有名颜色&lt/div>
        &lt!-- rgb,rgba颜色表示 -->
        &ltdiv class="test-rgb">测试rgb颜色&lt/div>
        &lt!--请设计div和class，探究长短16进制颜色表示 -->
        &ltdiv class="sixteen">探究长短16进制颜色表示&lt/div>
        &lt!--请设计div和class，探究hsl,hsla颜色表示 -->
        &ltdiv class="hsl">探究hsl颜色表示&lt/div>
        &ltdiv class="hsla">探究hsla颜色表示&lt/div>
        &lt!--请设计div和class，探究不透明度opacity 并和rgba\hsla做效果比较-->
        &ltdiv class="opacity">探究不透明度opacity&lt/div>
        &ltdiv class="rgba">rgba&lt/div>
        &ltdiv class="hsla">hsla&lt/div>
        &ltstyle>
            div {
                /* 给所有div中的文字一个统一的前景色 */
                color: rgb(14, 11, 96);
                width: 200px;
                height: 100px;
                /* 画一个宽一些的边框，留意边框下的背景色 */
                border: 15px red dashed;
                /* div间隔 */
                margin-bottom: 5px;
            }
    
            .test-named-color {
                background-color: aquamarine;
            }
    
            .test-rgb {
                background-color: rgb(102, 204, 255);
            }
    
            .sixteen {
                background-color: #39C5BB;
            }
    
            .hsl {
                background-color: hsl(120deg, 70%, 50%);
            }
    
            .hsla {
                background-color: hsla(9, 100%, 64%, 1);
            }
    
            .opacity {
                background-image: linear-gradient(orange, pink);
                opacity: 0.5;
            }
    
            .rgba {
                background-color: rgba(102, 204, 255, 50%);
            }
            
        &lt/style></pre>


</body>

</html>